<html>
  <head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="/styles/main.css">
  <script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
  <script type="text/javascript">
		$(function(){
        		$('#main').hide().fadeIn(1000);
			$('#createNew').click(function() {
				$('#mine').slideUp(500);
				$('#new').hide();
				$('#new').load("/create", function(){
                                	$(this).fadeIn(2000);
                                });
			});
	  	});
	 </script> 
  <body class="bodyClass">
      
	<div id="main">
	<h2>ExperiVent</h2>
        <div class="list">
	<h3>My experiments</h3>
	<ul id="mine">
	{% for exp in coordinates %}
	  <li><a class="listElement" href="/display?{{ exp.key}}">
	    {{ exp.name }}
	  </a></li>
	{% endfor %}
	</ul>
        <hr/>
        <div id="new"><a id="createNew" class="button" href="#">Start a new experiment!</a></div>
        </div>
	</div>

  </body>
</html>
